import React, { useMemo } from 'react';
import { LeftPanelProps } from '../../types';
import { renderDynamicState } from './StatusPanelRenderer';

const LeftPanel: React.FC<LeftPanelProps> = ({ isOpen, width, currentTurn, currentTurnIndex, updateDynamicStateField, changedPaths, aiCallMode }) => {
  const isLargeScreen = window.matchMedia("(min-width: 1024px)").matches;

  const memoizedStatusPanel = useMemo(() => {
    return currentTurn ? renderDynamicState(currentTurn.turnStateSnapshot, currentTurnIndex, updateDynamicStateField, changedPaths, aiCallMode) : <p className="text-gray-500 italic">等待AI更新...</p>;
  }, [currentTurn, currentTurnIndex, updateDynamicStateField, changedPaths, aiCallMode]);

  return (
    <div
      className="bg-gray-800 rounded-lg shadow-md flex-col w-full lg:w-auto"
      style={isLargeScreen ? {
        width: isOpen ? `${width}%` : '0%',
        transition: 'width 0.3s ease-in-out',
        flexShrink: 0,
        overflow: 'hidden',
      } : { display: isOpen ? 'flex' : 'none' }}
    >
      <div className={`overflow-y-auto h-full w-full p-3 sm:p-4 transition-opacity duration-300 ${isLargeScreen && !isOpen ? 'opacity-0' : 'opacity-100'}`}>
        <h3 className="text-lg font-semibold mb-3 text-blue-300 border-b border-gray-700 pb-2">游戏状态</h3>
        {memoizedStatusPanel}
      </div>
    </div>
  );
};

export default LeftPanel;
